import React, { memo, useEffect, useState } from 'react'
import '../../../assets/styles/components/order/orderTable.scss'
import PropTypes from 'prop-types'
import {Table} from 'antd'
import moment from 'moment'
import 'moment/locale/zh-cn'
import {vendorIDsObj} from '../../../config'
import { Link } from 'react-router-dom'

const {Column} = Table

const OrderTable = props => {
  const {dataSource, offset, pageSize, total, onShowSizeChange, onPageChange} = props

  const [pagination, setPagination] = useState({
    position: ['none', 'bottomCenter'],
    pageSize: 50,
  })

  useEffect(() => {
    setPagination({
      ...pagination,
      pageSize,
      total,
      onChange: onPageChange,
      onShowSizeChange,
      current: (offset / pageSize) + 1
    })
  }, [pageSize, total, offset])

  return (
    <Table
      dataSource={dataSource}
      className="orderTable"
      // bordered
      rowKey={(record) => record.vendorOrderID}
      size="small"
      pagination={pagination}
      scroll={{ y: true, scrollToFirstRowOnChange: true }}
    >
      <Column align="center" width={100} title="下单时间" dataIndex="orderCreatedAt" style={{width: '100px'}} render={
        createdAt => (
          <div>
            <div>{moment(createdAt).format('YYYY-MM-DD')}</div>
            <div>{moment(createdAt).format('HH:mm:ss')}</div>
          </div>
        )
      }></Column>
      <Column title="订单编号" dataIndex="vendorOrderID"
        render={
          (vendorOrderID, {vendorID}) => (
            <>
              {vendorIDsObj[vendorID].tiny} {vendorOrderID}
            </>
          )
        }
      ></Column>
      <Column title="序号" dataIndex="orderSeq"></Column>
      <Column title="门店" dataIndex="storeName" render={
        (storeName, {jxStoreID}) => (
          <Link to={{pathname: 'storemanager', search: '?storeID='+ jxStoreID}}>{storeName}</Link>
        )
      }></Column>
    </Table>
  )
}

Table.propTypes = {
  dataSource: PropTypes.array.isRequired,
  pageSize: PropTypes.number,
  total: PropTypes.number,
  offset: PropTypes.number,
  onShowSizeChange: PropTypes.func,
  onPageChange: PropTypes.func
}

Table.defaultProps = {
  pageSize: 50,
  total: 0,
  offset: 0,
  onShowSizeChange: () => {console.warn('onShowSizeChange need init')},
  onPageChange: () => {console.warn('onChange need init')}
}

export default memo(OrderTable)
